<!-- 数据导入弹框组件 -->
<template>
  <el-dialog v-model="dialogVisible" @close="cancleUpload" title="详情" width="900px" destroy-on-close>
    <div v-if="title == '专题图'" class="detail">
      <ImagePreview :src="baseUrl + form.pictureFile" class="img"></ImagePreview>
      <div style="padding-left: 50px;width: 35%;">
        <p style="font-size: 22px;font-weight: bold;color: #333;">
          <el-tooltip effect="customized" :content="form.meansName" placement="top-end">
            <span class="ellipsis">{{ form.meansName }}</span>
          </el-tooltip>
        </p>
        <p><span>成图编号：</span>{{ form.number }}</p>
        <p v-if="module2 == '活断层分布图'"><span>成果图类型：</span>{{ form.type == '0' ? '断层分布图' : '地震构造图' }}</p>
        <p v-if="module2 == '地质灾害危险性分布图'"><span>灾害类型：</span>{{ form.disasterType }}</p>
        <p style="display: flex;width: 100%;"><span
            style="display: inline-block;width: 60px;margin-right: 0px;">关键词：</span>
        <div style="width: calc(100% - 60px);">
          <template v-if="form.keyword">
            <el-tooltip effect="customized" :content="form.keyword" placement="top-end">
              <span>
                <el-space wrap :size="15">
                  <el-tag effect="plain" v-for="key in form.keyword.split(',')">{{ key }}</el-tag>
                </el-space>
              </span>
            </el-tooltip>
          </template>
          <template v-else>
            <span style="margin-left: 15px;color: #666;">无</span>
          </template>
        </div>
        </p>
        <p style="display: flex;width: 100%;"><span style="display: inline-block;width: 80px;">空间位置：</span> {{
          form.province }}{{ (form.city && form.city != '全部') ? form.city : null }}{{
    (form.county && form.county != '全部') ? form.county : null }}</p>
        <p><span>生产日期：</span> {{ form.plotTime }}</p>
        <p><span>制图单位：</span> {{ form.draftingUnit }}</p>
        <p><span>发布单位：</span> {{ form.publishingUnit }}</p>
        <p v-if="!form.remark"><span>备注：</span></p>
        <p v-else>
          <el-tooltip effect="customized" :content="form.remark" placement="bottom-end">
                      <span class="ellipsis">备注：{{ form.remark }}</span>
          </el-tooltip>
        </p>
        <p v-if="!form.notes"><span>备注1：</span></p>
        <p v-else>
          <el-tooltip effect="customized" :content="form.notes" placement="bottom-end">
                      <span class="ellipsis">备注1：{{ form.notes }}</span>
          </el-tooltip>
        </p>
        <p><el-button type="primary" @click="handleDown(form)">下载</el-button></p>
      </div>
    </div>
    <div v-if="title == '历史地震'" class="cont">
      <div v-if="form.eventAbbrevia">
        <div class="header">
          <span></span>
          <b style="font-size: 24px;color: #107ce1;">{{ form.eventAbbrevia }}</b>
          <span></span>
        </div>
        <div>
          <p class="indent">据中国地震台网测定，北京时间{{ form.occurrenceDate }} {{ form.occurrenceTime }}，在{{ form.location }}(北纬{{
            form.latitude }}度，东经{{ form.longitude }}度)
            发生{{ form.magnitude }}级地震，震源深度{{ form.depth }}千米。</p>
        </div>
      </div>
      <div class="box codeContent" id="pdf-wrapper" v-if="form.eventAbbreviation">
        <div class="header">
          <span></span>
          <b style="font-size: 24px;color: #107ce1;">{{ form.eventAbbreviation }}</b>
          <el-button type="primary" @click="downImg">下载</el-button>
        </div>
        <div>
          <p class="indent">据中国地震台网测定，北京时间{{ form.jedsDate }}在{{ form.referencePosition }}(北纬{{
            form.jedsLatitude }}度，东经{{ form.jedsLongitude }}度)
            发生{{ form.magnitude }}级地震，震源深度{{ form.depth }}千米。此次地震最高烈度为{{ form.maximumIntensity }}。</p>
          <p><b>宏观震中：</b>{{ form.location1 }}</p>
          <p><b>人员伤亡情况：</b>本次地震已致{{ form.deadNumber }}人遇难，{{ form.injuries }}人受伤。{{ form.causeOfDeath }}</p>
          <p v-if="form.desEarthquakeDamage"><b>震害现象描述：</b>{{ form.desEarthquakeDamage }}</p>
          <p v-if="form.note"><b>说明：</b>{{ form.note }}</p>
          <el-divider />
          <p class="juzhong" v-if="form.isolinePic"><b class="subtitle">等震线</b>
            <el-space wrap :size="10">
              <ImagePreview v-for="item in form.isolinePicList" :src="baseUrl + item.attachId" class="img"></ImagePreview>
            </el-space>
          </p>
          <p class="juzhong" v-if="form.intensityMap"><b class="subtitle">烈度图</b>
            <el-space wrap :size="10">
              <ImagePreview v-for="item in form.intensityMapList" :src="baseUrl + item.attachId" class="img"></ImagePreview>
            </el-space>
          </p>
          <p class="juzhong" v-if="form.jedsZhzp"><b class="subtitle">典型震害图片</b>
            <el-space wrap :size="10">
              <ImagePreview v-for="item in form.jedsZhzpList" :src="baseUrl + item.attachId" class="img"></ImagePreview>
            </el-space>
          </p>
          <el-divider v-if="form.attachment" />
          <p class="juzhong" v-if="form.attachment">
            <b class="subtitle">附件</b>
            <span v-for="item in form.attachmentList">
              <span>{{ item.attachName }}</span>
              <span
                style="padding:5px 10px;background-color: #107ce1;color: #fff;margin-left: 20px;border-radius: 2px;cursor: pointer;"
                @click="handleDownload(item)">下载</span><br>
            </span>
          </p>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="default" plain @click="cancleUpload">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
// 获取token
import { getToken } from "@/utils/auth";
import { detail } from '@/api/thematicMap/probeClass/activeFault';
import { detailLs, detailZh } from '@/api/index/search';
import { checkPermi } from "@/utils/permissionBtn"
import html2canvas from "html2canvas";
// 获取当前实例
const { proxy } = getCurrentInstance();
// 上传成功回调
const emit = defineEmits(['update:dialogVisible', 'importSuccess']);
// 接口根路径
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";
// 设置token
const headers = ref({ token: "token " + getToken() });

// 接收父组件传参
const props = defineProps({
  // 显示弹框
  dialogVisible: {
    type: Boolean,
    required: false,
    default: () => false,
  },
  title: {
    type: String,
    required: false,
    default: '专题图',
  },
  id: {
    type: String,
    required: false,
    default: '',
  },
  module2: {
    type: String,
    required: false,
    default: '',
  }
});
const form = ref({});
// 关闭上传弹框
const cancleUpload = () => {
  emit('update:dialogVisible', false);
}

// 截图下载
function downImg() {
    html2canvas(document.querySelector('.codeContent')).then(canvas => {
        const imgUrl = canvas.toDataURL('image/jpeg')
        const image = document.createElement('img')
        image.src = imgUrl
        const a = document.createElement('a')
        a.href = imgUrl
        // a.download 后面的内容为自定义图片的名称
        a.download = '地震灾害信息'
        a.click()
    })
}

// 下载文件
function handleDown(form) {
  let flag = true;
  flag = checkPermi(form.flag, 'dowon')
  if (!flag) {
    proxy.$modal.msgWarning("暂无权限下载");
    return;
  }
  var query = {
    attachId: form.pictureFile,
    name: form.pictureFileAtt[0].attachName
  }
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}

// 下载文件
function handleDownload(item) {
    var query = {
        attachId: item.attachId,
        name: item.attachName
    }
    location.href = baseUrl + "?name="+query.name+'&id='+ query.attachId+'&dataOrigin=5';
}

onMounted(() => {
  if (props.id) {
    switch (props.title) {
      case '专题图':
        detail(props.id).then(res => {
          form.value = res.data;
        })
        break;
      case '历史地震':
        if (props.module2 == '地震灾害信息') {
          detailLs(props.id).then(res => {
            form.value = res.data;
          })
        } else {
          detailZh(props.id).then(res => {
            form.value = res.data;
          })
        }
        break;
      default:
        break;
    }
  }
})
</script>

<style lang="scss">
.box{
  padding: 20px;
}
.detail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 30px;
  overflow-x: auto;

  .img {
    width: 60%;
    height: 450px;
    float: left;
  }

  .ellipsis {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  p {
    margin:20px 0px;
    color: #666;
  }

  .el-tag {
    color: #107ce5;
    border-color: #107ce5;
  }
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  background: #dddfe5;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: #dddfe5;
}</style>
<style>
.cont {
    padding-left: 10%;
    padding-right: 10%;
    font-size: 16px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.indent {
    text-indent: 2em;
}

.img {
    width: 100px;
    height: 100px;
}
.juzhong{
    display: flex;
    align-items: center;
}
.subtitle {
    display: inline-block;
    width: 100px;
}
</style>